<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">新增</el-button>
    <el-select v-model="value" class="m-2" placeholder="Select" size="large">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>

  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="选择">
      <template #default="scope">
       <input type="checkbox" v-model="scope.row.checked"/>
      </template>
    </el-table-column>
    <el-table-column label="菜单名称">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="路径">
      <template #default="scope">
        {{ scope.row.path }}
      </template>
    </el-table-column>
  
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialogVisible" title="新增bug菜单" width="30%">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="菜单路径" prop="path">
        <el-input v-model="ruleForm.path" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">新增</el-button>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-button type="primary" @click="sumbit">确定授权</el-button>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive,watch } from 'vue'
import { menuQuery, menuAdd,typeMenuAdd,typeMenuQuery } from '../services/menuService'
import type { FormInstance, FormRules } from 'element-plus'


interface Menu {
  _id?: string,
  name: string
  path: string,
  type?:number,
  checked:boolean,
}
let dialogVisible = ref<boolean>(false) 
  const tableData = ref<Array<Menu>>([])//控制显示
const ruleFormRef = ref<FormInstance>() //表单元素
const ruleForm = reactive({
  //数据
path: '',
name:''
})
const value = ref('');

const options =ref<any>([]);//数据源
const validateName = (rule: any, value: any, callback: any) => {
  if (value.length >= 4 && value.length <= 10) {
    callback()
  } else {
    callback(new Error('长度只能是4到10位'))
  }
}
const rules = reactive<FormRules<typeof ruleForm>>({
  //规格
 name: [{ validator: validateName, trigger: 'blur' }],
 path: [{ required:true,message:"路径不能为空", trigger: 'blur' }]
})

onMounted(async () => {
  let res = await menuQuery({})
  tableData.value = res.data.result.map((item:any)=>{
    item.checked = false;
    return item;
  })
  
  options.value = res.data.typeList.map((item:any)=>{
     return {label:item.name,value:item._id}
  });
})

//编辑事件
const handleEdit = (index: number, row: Menu) => {
  // console.log(index, row)
}
//删除事件
const handleDelete = async (index: number, row:Menu) => {
    // console.log(index, row)
//   alert(row._id)
// let _id =row._id;
//   let res = await userDel({
//     _id
//   })
//   if(res.data.code==200){
//     tableData.value = tableData.value.filter((item)=>{
//         return item._id!=_id
//     })
//   }
}
//提交
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      let res = await menuAdd({
       name: ruleForm.name,
        path:ruleForm.path,
        type:1
      })

      tableData.value.push(res.data.data[0])
      formEl.resetFields()
      dialogVisible.value = false
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  dialogVisible.value = false
}

//确定授权
let sumbit = async()=>{
  let typeid = value.value;

  let checkedList = tableData.value.filter(item=>item.checked);
  // console.log(typeid);
  // console.log(checkedList);
  if(typeid!=""){
     let res = await typeMenuAdd({
      typeid,
      menulist:checkedList
     })
     if(res.data.code==200){
         alert("授权成功");
}
    //  console.log(res);
     
  }else{
  
    alert("请选择类别")
  }
}
watch([value],async()=>{
  // alert(value.value);
  let res = await typeMenuQuery({
    typeid:value.value
  })
 let existList = res.data.data;
 tableData.value.map(item=>{
  item.checked=false;
  if(existList.some((info:any)=>info.menuid==item._id)){
    item.checked = true;



  }
   return item;
})
  
})
</script>
